<template>
  <a-collapse
    :activeKey="activeKey"
    @change="change"
    :expandIcon="expandIcon"
    :expandIconPosition="expandIconPosition"
    :destroyInactivePanel="destroyInactivePanel"
    :defaultActiveKey="defaultActiveKey"
    :bordered="bordered"
    :accordion="accordion"
  >
    <slot
      name="expandIcon"
      slot="expandIcon"
      slot-scope="props"
      v-bind="props"
    />
    <slot />
  </a-collapse>
</template>

<script>
export default {
  name: 'DCollapse',
  props: {
    activeKey: {
      type: String
    },
    defaultActiveKey: {
      type: String
    },
    bordered: {
      type: Boolean,
      default: true
    },
    accordion: {
      type: Boolean,
      default: false
    },
    destroyInactivePanel: {
      type: Boolean,
      default: false
    },
    expandIcon: {
      type: Function
    },
    expandIconPosition: {
      type: String
    }
  },
  methods: {
    change(value) {
      this.$emit('update:activeKey', value);
    }
  }
};
</script>
